www.gusucode.com > 网页滑动条(滑块)Accessible Unobtrusive Slider 插件示例源码程序 > 网页滑动条(滑块)Accessible Unobtrusive Slider 插件示例/sliderv2/slider-v2/slider.min.js

    var fdSliderController=(function(){var sliders={},uniqueid=0,mouseWheelEnabled=true;var removeMouseWheelSupport=function(){mouseWheelEnabled=false};var addEvent=function(obj,type,fn){if(obj.attachEvent){obj["e"+type+fn]=fn;obj[type+fn]=function(){obj["e"+type+fn](window.event)};obj.attachEvent("on"+type,obj[type+fn])}else{obj.addEventListener(type,fn,true)}};var removeEvent=function(obj,type,fn){if(obj.detachEvent){try{obj.detachEvent("on"+type,obj[type+fn]);obj[type+fn]=null}catch(err){}}else{obj.removeEventListener(type,fn,true)}};var stopEvent=function(e){if(e==null){e=document.parentWindow.event}if(e.stopPropagation){e.stopPropagation();e.preventDefault()}
/*@cc_on@*/
/*@if(@_win32)
                e.cancelBubble = true;
                e.returnValue = false;
                /*@end@*/
return false};var joinNodeLists=function(){if(!arguments.length){return[]}var nodeList=[];for(var i=0;i<arguments.length;i++){for(var j=0,item;item=arguments[i][j];j++){nodeList[nodeList.length]=item}}return nodeList};var parseCallbacks=function(cbs){if(cbs==null){return{}}var func,type,cbObj={},parts,obj;for(var i=0,fn;fn=cbs[i];i++){type=fn.match(/(fd_slider_cb_(update|create|destroy|redraw|move|focus|blur)_)([^\s|$]+)/i)[1];fn=fn.replace(new RegExp("^"+type),"").replace(/-/g,".");type=type.replace(/^fd_slider_cb_/i,"").replace(/_$/,"");try{if(fn.indexOf(".")!=-1){parts=fn.split(".");obj=window;for(var x=0,part;part=obj[parts[x]];x++){if(part instanceof Function){(function(){var method=part;func=function(data){method.apply(obj,[data])}})()}else{obj=part}}}else{func=window[fn]}if(!(func instanceof Function)){continue}if(!(type in cbObj)){cbObj[type]=[]}cbObj[type][cbObj[type].length]=func}catch(err){}}return cbObj};var parseClassNames=function(cbs){if(cbs==null){return""}var cns=[];for(var i=0,cn;cn=cbs[i];i++){cns[cns.length]=cn.replace(/^fd_slider_cn_/,"")}return cns.join(" ")};var createSlider=function(options){if(!options.inp||!options.inp.id){return false}destroySingleSlider(options.inp.id);sliders[options.inp.id]=new fdSlider(options);return true};var init=function(elem){var ranges=/fd_range_([-]{0,1}[0-9]+(d[0-9]+){0,1}){1}_([-]{0,1}[0-9]+(d[0-9]+){0,1}){1}/i,increment=/fd_inc_([-]{0,1}[0-9]+(d[0-9]+){0,1}){1}/,kIncrement=/fd_maxinc_([-]{0,1}[0-9]+(d[0-9]+){0,1}){1}/,callbacks=/((fd_slider_cb_(update|create|destroy|redraw|move|focus|blur)_)([^\s|$]+))/ig,classnames=/(fd_slider_cn_([a-zA-Z0-9_\-]+))/ig,inputs=elem&&elem.tagName&&elem.tagName.search(/input|select/i)!=-1?[elem]:joinNodeLists(document.getElementsByTagName("input"),document.getElementsByTagName("select")),range,tmp,options;for(var i=0,inp;inp=inputs[i];i++){if((inp.tagName.toLowerCase()=="input"&&inp.type=="text"&&(inp.className.search(ranges)!=-1||inp.className.search(/fd_slider/)!=-1))||(inp.tagName.toLowerCase()=="select"&&inp.className.search(/fd_slider/)!=-1)){if(!elem&&inp.id&&document.getElementById("fd-slider-"+inp.id)){continue}if(!inp.id){inp.id=="sldr"+uniqueid++}options={inp:inp,inc:inp.className.search(increment)!=-1?inp.className.match(increment)[0].replace("fd_inc_","").replace("d","."):"1",maxInc:inp.className.search(kIncrement)!=-1?inp.className.match(kIncrement)[0].replace("fd_maxinc_","").replace("d","."):false,range:[0,100],callbacks:parseCallbacks(inp.className.match(callbacks)),classNames:parseClassNames(inp.className.match(classnames)),tween:inp.className.search(/fd_tween/i)!=-1,vertical:inp.className.search(/fd_vertical/i)!=-1,hideInput:inp.className.search(/fd_hide_input/i)!=-1,clickJump:inp.className.search(/fd_jump/i)!=-1,fullARIA:inp.className.search(/fd_full_aria/i)!=-1,noMouseWheel:inp.className.search(/fd_disable_mousewheel/i)!=-1};if(inp.tagName.toLowerCase()=="select"){options.range=[0,inp.options.length-1]}else{if(inp.className.search(ranges)!=-1){range=inp.className.match(ranges)[0].replace("fd_range_","").replace(/d/g,".").split("_");options.range=[range[0],range[1]]}}createSlider(options)}}return true};var destroySingleSlider=function(id){if(id in sliders){sliders[id].destroy();delete sliders[id];return true}return false};var destroyAllsliders=function(e){for(slider in sliders){sliders[slider].destroy()}};var unload=function(e){destroyAllsliders();sliders=null;removeEvent(window,"unload",unload);removeEvent(window,"resize",resize);removeOnloadEvent()};var resize=function(e){for(slider in sliders){sliders[slider].onResize()}};var removeOnloadEvent=function(){removeEvent(window,"load",init);
/*@cc_on@*/
/*@if(@_win32)
                removeEvent(window, "load",   function() { setTimeout(onload, 200) });
                /*@end@*/
};function fdSlider(options){var inp=options.inp,tagName=inp.tagName.toLowerCase(),min=+options.range[0],max=+options.range[1],range=Math.abs(max-min),inc=tagName=="select"?1:+options.inc||1,maxInc=options.maxInc?options.maxInc:inc*2,precision=options.inc.search(".")!=-1?options.inc.substr(options.inc.indexOf(".")+1,options.inc.length-1).length:0,steps=Math.ceil(range/inc),useTween=!!options.tween,fullARIA=!!options.fullARIA,hideInput=!!options.hideInput,clickJump=useTween?false:!!options.clickJump,vertical=!!options.vertical,callbacks=options.callbacks,classNames=options.classNames,noMWheel=!!options.noMouseWheel,timer=null,kbEnabled=true,sliderH=0,sliderW=0,tweenX=0,tweenB=0,tweenC=0,tweenD=0,frame=0,x=0,y=0,maxPx=0,handlePos=0,destPos=0,mousePos=0,deltaPx=0,stepPx=0,self=this,changeList={},initVal=null,outerWrapper,wrapper,handle,bar;if(max<min){inc=-inc;maxInc=-maxInc}function destroySlider(){try{removeEvent(outerWrapper,"mouseover",onMouseOver);removeEvent(outerWrapper,"mouseout",onMouseOut);removeEvent(outerWrapper,"mousedown",onMouseDown);removeEvent(handle,"focus",onFocus);removeEvent(handle,"blur",onBlur);if(!window.opera){removeEvent(handle,"keydown",onKeyDown);removeEvent(handle,"keypress",onKeyPress)}else{removeEvent(handle,"keypress",onKeyDown)}removeEvent(handle,"mousedown",onHandleMouseDown);removeEvent(handle,"mouseup",onHandleMouseUp);if(mouseWheelEnabled&&!noMWheel){if(window.addEventListener&&!window.devicePixelRatio){window.removeEventListener("DOMMouseScroll",trackMouseWheel,false)}else{removeEvent(document,"mousewheel",trackMouseWheel);removeEvent(window,"mousewheel",trackMouseWheel)}}}catch(err){}wrapper=bar=handle=outerWrapper=timer=null;callback("destroy");callbacks=null}function redraw(){locate();try{var sW=outerWrapper.offsetWidth,sH=outerWrapper.offsetHeight,hW=handle.offsetWidth,hH=handle.offsetHeight,bH=bar.offsetHeight,bW=bar.offsetWidth;maxPx=vertical?sH-hH:sW-hW;stepPx=maxPx/steps;deltaPx=maxPx/Math.ceil(range/maxInc);sliderW=sW;sliderH=sH;valueToPixels()}catch(err){}callback("redraw")}function callback(type){var cbObj={elem:inp,value:tagName=="select"?inp.options[inp.selectedIndex].value:inp.value};if(type in callbacks){for(var i=0,func;func=callbacks[type][i];i++){func(cbObj)}}}function onFocus(e){outerWrapper.className=outerWrapper.className.replace("focused","")+" focused";if(mouseWheelEnabled&&!noMWheel){addEvent(window,"DOMMouseScroll",trackMouseWheel);addEvent(document,"mousewheel",trackMouseWheel);if(!window.opera){addEvent(window,"mousewheel",trackMouseWheel)}}callback("focus")}function onBlur(e){outerWrapper.className=outerWrapper.className.replace(/focused|fd-fc-slider-hover|fd-slider-hover/g,"");if(mouseWheelEnabled&&!noMWheel){removeEvent(document,"mousewheel",trackMouseWheel);removeEvent(window,"DOMMouseScroll",trackMouseWheel);if(!window.opera){removeEvent(window,"mousewheel",trackMouseWheel)}}callback("blur")}function trackMouseWheel(e){if(!kbEnabled){return }e=e||window.event;var delta=0;if(e.wheelDelta){delta=e.wheelDelta/120;if(window.opera&&window.opera.version()<9.2){delta=-delta}}else{if(e.detail){delta=-e.detail/3}}if(vertical){delta=-delta}if(delta){var xtmp=vertical?handle.offsetTop:handle.offsetLeft;xtmp=(delta<0)?Math.ceil(xtmp+deltaPx):Math.floor(xtmp-deltaPx);pixelsToValue(Math.min(Math.max(xtmp,0),maxPx))}return stopEvent(e)}function onKeyPress(e){e=e||document.parentWindow.event;if((e.keyCode>=33&&e.keyCode<=40)||!kbEnabled||e.keyCode==45||e.keyCode==46){return stopEvent(e)}return true}function onKeyDown(e){if(!kbEnabled){return true}e=e||document.parentWindow.event;var kc=e.keyCode!=null?e.keyCode:e.charCode;if(kc<33||(kc>40&&(kc!=45&&kc!=46))){return true}var value=tagName=="input"?parseFloat(inp.value):inp.selectedIndex;if(isNaN(value)||value<Math.min(min,max)){value=Math.min(min,max)}if(kc==37||kc==40||kc==46||kc==34){value-=(e.ctrlKey||kc==34?maxInc:inc)}else{if(kc==39||kc==38||kc==45||kc==33){value+=(e.ctrlKey||kc==33?maxInc:inc)}else{if(kc==35){value=max}else{if(kc==36){value=min}}}}valueToPixels(value);callback("update");return stopEvent(e)}function onMouseOver(e){
/*@cc_on@*/
/*@if(@_jscript_version <= 5.6)
                        if(this.className.search(/focused/) != -1) {
                                this.className = this.className.replace("fd-fc-slider-hover", "") +' fd-fc-slider-hover';
                                return;
                        }
                        /*@end@*/
this.className=this.className.replace(/fd\-slider\-hover/g,"")+" fd-slider-hover"}function onMouseOut(e){
/*@cc_on@*/
/*@if(@_jscript_version <= 5.6)
                        if(this.className.search(/focused/) != -1) {
                                this.className = this.className.replace("fd-fc-slider-hover", "");
                                return;
                        }
                        /*@end@*/
this.className=this.className.replace(/fd\-slider\-hover/g,"")}function onHandleMouseUp(e){e=e||window.event;removeEvent(document,"mousemove",trackMouse);removeEvent(document,"mouseup",onHandleMouseUp);kbEnabled=true;if(window.opera){try{setTimeout(function(){onfocus()},0)}catch(err){}}document.body.className=document.body.className.replace(/slider-drag-vertical|slider-drag-horizontal/g,"");return stopEvent(e)}function onHandleMouseDown(e){e=e||window.event;mousePos=vertical?e.clientY:e.clientX;handlePos=parseInt(vertical?handle.offsetTop:handle.offsetLeft)||0;kbEnabled=false;clearTimeout(timer);timer=null;addEvent(document,"mousemove",trackMouse);addEvent(document,"mouseup",onHandleMouseUp);if(window.devicePixelRatio||(document.all&&!window.opera)){try{setTimeout(function(){handle.focus()},0)}catch(err){}}document.body.className+=" slider-drag-"+(vertical?"vertical":"horizontal")}function onMouseUp(e){e=e||window.event;removeEvent(document,"mouseup",onMouseUp);if(!useTween){clearTimeout(timer);timer=null;kbEnabled=true}return stopEvent(e)}function trackMouse(e){e=e||window.event;pixelsToValue(snapToNearestValue(handlePos+(vertical?e.clientY-mousePos:e.clientX-mousePos)))}function onMouseDown(e){e=e||window.event;var targ;if(e.target){targ=e.target}else{if(e.srcElement){targ=e.srcElement}}if(targ.nodeType==3){targ=targ.parentNode}if(targ.className.search("fd-slider-handle")!=-1){return true}try{setTimeout(function(){handle.focus()},0)}catch(err){}clearTimeout(timer);locate();timer=null;kbEnabled=false;var posx=0,sLft=0,sTop=0;if(document.documentElement&&document.documentElement.scrollTop){sTop=document.documentElement.scrollTop;sLft=document.documentElement.scrollLeft}else{if(document.body){sTop=document.body.scrollTop;sLft=document.body.scrollLeft}}if(e.pageX){posx=vertical?e.pageY:e.pageX}else{if(e.clientX){posx=vertical?e.clientY+sTop:e.clientX+sLft}}posx-=vertical?y+Math.round(handle.offsetHeight/2):x+Math.round(handle.offsetWidth/2);posx=snapToNearestValue(posx);if(useTween){tweenTo(posx)}else{if(clickJump){pixelsToValue(posx)}else{addEvent(document,"mouseup",onMouseUp);destPos=posx;onTimer()}}}function incrementHandle(numOfSteps){var value=tagName=="input"?parseFloat(inp.value):inp.selectedIndex;if(isNaN(value)||value<Math.min(min,max)){value=Math.min(min,max)}value+=inc*numOfSteps;valueToPixels(value)}function snapToNearestValue(px){var rem=px%stepPx;if(rem&&rem>=(stepPx/2)){px+=(stepPx-rem)}else{px-=rem}return Math.min(Math.max(parseInt(px,10),0),maxPx)}function locate(){var curleft=0,curtop=0,obj=outerWrapper;try{while(obj.offsetParent){curleft+=obj.offsetLeft;curtop+=obj.offsetTop;obj=obj.offsetParent}}catch(err){}x=curleft;y=curtop}function onTimer(){var xtmp=vertical?handle.offsetTop:handle.offsetLeft;xtmp=Math.round((destPos<xtmp)?Math.max(destPos,Math.floor(xtmp-deltaPx)):Math.min(destPos,Math.ceil(xtmp+deltaPx)));pixelsToValue(xtmp);if(xtmp!=destPos){timer=setTimeout(onTimer,steps>20?50:100)}else{kbEnabled=true}}var tween=function(){frame++;var c=tweenC,d=20,t=frame,b=tweenB,x=Math.ceil((t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b);pixelsToValue(t==d?tweenX:x);callback("move");if(t!=d){timer=setTimeout(tween,20)}else{clearTimeout(timer);timer=null;kbEnabled=true}};function tweenTo(tx){kbEnabled=false;tweenX=parseInt(tx,10);tweenB=parseInt(vertical?handle.style.top:handle.style.left,10);tweenC=tweenX-tweenB;tweenD=20;frame=0;if(!timer){timer=setTimeout(tween,20)}}function pixelsToValue(px){handle.style[vertical?"top":"left"]=px+"px";var val=min+(Math.round(px/stepPx)*inc);setInputValue((tagName=="select"||inc==1)?Math.round(val):val)}function valueToPixels(val){var value=isNaN(val)?tagName=="input"?parseFloat(inp.value):inp.selectedIndex:val;if(isNaN(value)||value<Math.min(min,max)){value=Math.min(min,max)}else{if(value>Math.max(min,max)){value=Math.max(min,max)}}setInputValue(value);handle.style[vertical?"top":"left"]=Math.round(((value-min)/inc)*stepPx)+"px"}function setInputValue(val){val=isNaN(val)?min:val;if(tagName=="select"){try{val=parseInt(val,10);if(inp.selectedIndex==val){return }inp.options[val].selected=true}catch(err){}}else{val=(min+(Math.round((val-min)/inc)*inc)).toFixed(precision);if(inp.value==val){return }inp.value=val}updateAriaValues();callback("update")}function findLabel(){var label;if(inp.parentNode&&inp.parentNode.tagName.toLowerCase()=="label"){label=inp.parentNode}else{var labelList=document.getElementsByTagName("label");for(var i=0,lbl;lbl=labelList[i];i++){if((lbl.htmlFor&&lbl.htmlFor==inp.id)||(lbl.getAttribute("for")==inp.id)){label=lbl;break}}}if(label&&!label.id){label.id=inp.id+"_label"}return label}function updateAriaValues(){handle.setAttribute("aria-valuenow",tagName=="select"?inp.options[inp.selectedIndex].value:inp.value);handle.setAttribute("aria-valuetext",tagName=="select"?inp.options[inp.selectedIndex].text:inp.value)}function onChange(e){valueToPixels();callback("update");return true}(function(){if(hideInput){inp.className+=" fd_hide_slider_input"}else{addEvent(inp,"change",onChange)}outerWrapper=document.createElement("div");outerWrapper.className="fd-slider"+(vertical?"-vertical ":" ")+classNames;outerWrapper.id="fd-slider-"+inp.id;wrapper=document.createElement("span");wrapper.className="fd-slider-inner";bar=document.createElement("span");bar.className="fd-slider-bar";if(fullARIA){handle=document.createElement("span");handle.setAttribute(!
/*@cc_on!@*/
false?"tabIndex":"tabindex","0")}else{handle=document.createElement("button");handle.setAttribute("type","button")}handle.className="fd-slider-handle";handle.appendChild(document.createTextNode(String.fromCharCode(160)));outerWrapper.appendChild(wrapper);outerWrapper.appendChild(bar);outerWrapper.appendChild(handle);inp.parentNode.insertBefore(outerWrapper,inp);
/*@cc_on@*/
/*@if(@_win32)
                        handle.unselectable       = "on";
                        bar.unselectable          = "on";
                        wrapper.unselectable      = "on";
                        outerWrapper.unselectable = "on";
                        /*@end@*/
addEvent(outerWrapper,"mouseover",onMouseOver);addEvent(outerWrapper,"mouseout",onMouseOut);addEvent(outerWrapper,"mousedown",onMouseDown);if(!window.opera){addEvent(handle,"keydown",onKeyDown);addEvent(handle,"keypress",onKeyPress)}else{addEvent(handle,"keypress",onKeyDown)}addEvent(handle,"focus",onFocus);addEvent(handle,"blur",onBlur);addEvent(handle,"mousedown",onHandleMouseDown);addEvent(handle,"mouseup",onHandleMouseUp);handle.setAttribute("role","slider");handle.setAttribute("aria-valuemin",min);handle.setAttribute("aria-valuemax",max);var lbl=findLabel();if(lbl){handle.setAttribute("aria-labelledby",lbl.id);handle.id="fd-slider-handle-"+inp.id;
/*@cc_on
                                /*@if(@_win32)
                                lbl.setAttribute("htmlFor", handle.id);
                                @else @*/
lbl.setAttribute("for",handle.id);
/*@end
                                @*/
}if(document.getElementById("fd_slider_describedby")){handle.setAttribute("aria-describedby","fd_slider_describedby")}updateAriaValues();callback("create");redraw()})();return{onResize:function(e){if(outerWrapper.offsetHeight!=sliderH||outerWrapper.offsetWidth!=sliderW){redraw()}},destroy:function(){destroySlider()},reset:function(){valueToPixels()},increment:function(n){incrementHandle(n)}}}addEvent(window,"load",init);addEvent(window,"unload",unload);addEvent(window,"resize",resize);
/*@cc_on@*/
/*@if(@_win32)
        var onload = function(e) {
                for(slider in sliders) { sliders[slider].reset(); }
        };                   
        addEvent(window, "load", function() { setTimeout(onload, 200) });
        /*@end@*/
return{create:function(elem){init(elem)},destroyAll:function(){destroyAllsliders()},destroySlider:function(id){return destroySingleSlider(id)},redrawAll:function(){resize()},increment:function(id,numSteps){if(!(id in sliders)){return false}sliders[id].increment(numSteps)},addEvent:addEvent,removeEvent:removeEvent,stopEvent:stopEvent,disableMouseWheel:function(){removeMouseWheelSupport()},removeOnLoadEvent:function(){removeOnloadEvent()}}})();